<!DOCTYPE html>

<!-- Remove in 2.0, replaced by dijit/tests/focus.html -->

<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>dijit.focus Test</title>
	<style type="text/css">
		@import "../../themes/claro/document.css";
		@import "../../themes/claro/claro.css";
		@import "../css/dijitTests.css";
	</style>

	<script type="text/javascript" src="../../../dojo/dojo.js"
		data-dojo-config="isDebug: true, parseOnLoad: true"></script>
	<script type="text/javascript">
		dojo.require("dijit.dijit"); // optimize: load dijit layer

		dojo.require("dijit.form.DateTextBox");
		dojo.require("dijit.form.ComboBox");
		dojo.require("dijit.form.NumberSpinner");
		dojo.require("dijit.form.ComboButton");

		dojo.require("dijit.Menu");
		dojo.require("dijit.MenuItem");
		dojo.require("dijit.PopupMenuItem");

		dojo.require("dijit.layout.ContentPane");
		dojo.require("dijit.Editor");

		dojo.require("dijit._base.focus");

		// This code does animation to change border color and width to show
		// active vs. non-active widgets.
		var queue=[];
		var animation;
		function animateBorderColor(widget, color, startWidth, endWidth){
			if(animation){
				queue.push(arguments);
				return;
			}
			var s = widget.domNode.style;
			s.borderStyle="solid";
			s.outlineStyle="solid";
			animation = dojo.animateProperty({
				node: widget.domNode,
				duration: 50,
				properties: {
					// depending on browser and node type, sometimes border or outline is ineffective.
					// doing both seems to work in all cases though (for at least one of them)
					borderColor: { end: color },
					borderWidth: { start: startWidth, end: endWidth },
					outlineColor: { end: color },
					outlineWidth: { start: startWidth, end: endWidth }
				},
				onEnd: function(){
					animation=null;
					if(queue.length){
						animateBorderColor.apply(null, queue.shift());
					}
				}
			});
			animation.play();
		}

		// This flag controls animation and can be disabled by the test harness in robot/focus_mouse.html
		animate = !window.location.search.match("animate=false");

		dojo.ready(function(){
			dojo.subscribe("widgetFocus", function(widget){
				console.log("focused on widget " + (widget?widget:"nothing"));
				if(animate){
					animateBorderColor(widget, "#ff0000", 1, 3);
				}
			});
			dojo.subscribe("widgetBlur", function(widget){
				console.log("blurred widget " + (widget?widget:"nothing"));
				if(animate){
					animateBorderColor(widget, "#0000ff", 3, 1);
				}
			});
			dojo.subscribe("focusNode", function(node){ console.log("focused on node " + (node?(node.id||node.tagName):"nothing"));});

			// Focus notification also comes through watch() on each widget
			dijit.registry.forEach(function(widget){
				widget.watch("focused", function(name, oldValue, newValue){
					console.log(this.id + "." + name + ": " + oldValue + " ---> " + newValue);
				});
			}, this);
		});
	</script>
	<style>
		div, fieldset, form, input {
			padding: 3px;
			margin: 3px;
			border: 1px solid blue;
		}
	</style>
</head>
<body style="background-color: #fff; color: black; padding: 0; margin: 0" class="claro">

	<h3>Widget Focus Test</h3>
	<p>
		This is for testing code to detect onBlur and onFocus on a widget level.<br>
		Focused widgets' borders will turn red.<br>
		Also, check the console log for focus and blur events on widgets.
	</p>

	<label>a form ContentPane widget:</label><br>
	<form id="form" data-dojo-type="dijit/layout/ContentPane" >
		<label for="first">simple input: </label><input id="first"/><br>

		<label>a fieldset ContentPane widget:</label><br>
		<fieldset id=fieldset1 data-dojo-type="dijit/layout/ContentPane">
			<label for="select">a ComboBox widget:</label>
			<select id=select data-dojo-type="dijit/form/ComboBox">
				<option>this</option>
				<option>is</option>
				<option>a</option>
				<option>list</option>
			</select>
			<label for="plain">a plain input:</label>
			<input id=plain value=plain/>
		</fieldset>
		<div id=editor data-dojo-type="dijit/Editor" >
			Hello world, this is an <i>editor</i>
		</div>
		<br>
		<label>another fieldset ContentPane:</label><br>
		<fieldset id=fieldset2 data-dojo-type="dijit/layout/ContentPane">
			<label for="date">a DateTextBox widget:</label>
			<input id=date data-dojo-type="dijit/form/DateTextBox"/><br>

			<label for="textarea">a plain textarea:</label><br>
			<textarea id=textarea>hello there!</textarea><br>

			<label for="spinner">a Spinner widget:</label>
			<input id=spinner data-dojo-type="dijit/form/NumberSpinner" data-dojo-props='value:100'/><br>

			<label>a Combobutton widget:</label>
			<div id=button data-dojo-type="dijit/form/ComboButton" data-dojo-props='tabIndex:"0"'>
				<span>push me</span>
				<div id=menu data-dojo-type="dijit/Menu">
					<div id=mi1 data-dojo-type="dijit/MenuItem">menu item 1</div>
					<div id=mi2 data-dojo-type="dijit/MenuItem">menu item 2</div>
					<div id=popupMenuItem data-dojo-type="dijit/PopupMenuItem">
						<span>submenu</span>
						<div id=submenu data-dojo-type="dijit/Menu">
							<div id=smi1 data-dojo-type="dijit/MenuItem">submenu item 1</div>
							<div id=smi2 data-dojo-type="dijit/MenuItem">submenu item 2</div>
						</div>
					</div>
				</div>
			</div>
		</fieldset>
	</form>
</body>
</html>
